<template>
	 <page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view class="record-container">
		<view class="search">
			<view class="search-box">
				<view class="icon">
					<image src="../../static/icon/search.png"></image>
				</view>
				<input @input="handleInput" v-model="searchText" @confirm="handleSearch" type="text"
					class="search-input" confirm-type="search" placeholder="请输入公告标题进行搜索">
			</view>
		</view>
		<!-- 全部 -->

		<notice-list v-if="noticeList.length" :noticeList="noticeList"></notice-list>
		<view v-else>
			<van-empty description="暂无公告" />
		</view>
		<uni-load-more v-if="noticeList.length >= 10" :status="status" />
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import NoticeList from '../components/noticeList.vue'
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['fontSize'])
		},
		components: {
			NoticeList
		},
		data() {
			return {
				timerId: '',
				status: 'more',
				searchText: '',
				noticeList: [],
				params: {
					title: '',
					projectId: null,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "",
						order: 0
					}
				}
				// btnList: ['全部','装修申请','装修验收','故障报修','上门回收','消防安全','保洁清理','设备安装']
			}
		},
		onLoad(options) {
			// this.getNoticeList()
			// this.getRoomList()
		},
		onShow() {
			this.getNoticeList()

		},
		onReachBottom() {
			// console.log('触发上拉')
			if (this.status !== 'noMore' && this.noticeList) {
				this.status = 'loading'
				this.getMoreNoticeList()
			}
		},
		// watch: {
		// 	searchText() {
		// 		if(this.searchText == ''){
		// 			this.params.title = null
		// 			this.getNoticeList()
		// 		}
		// 	}
		// },
		methods: {
			handleInput(event) {
				clearTimeout(this.timerId)
				this.timerId = setTimeout(() => {
					this.params.title = event.target.value
					this.getNoticeList()
				}, 500)
			},
			getNoticeList() {
				this.status = 'more'
				this.params.pagination.current = 1
				this.params.projectId = uni.getStorageSync('projId')
				uni.showLoading()
				this.$http.post('vx/proclamation/list', this.params).then(res => {
					if (res.code == 10000) {
						res.data.list.forEach(item => {
							item.发布时间 = dayjs(item['发布时间']).format('YYYY-MM-DD HH:mm:ss')
						})
						this.noticeList = res.data.list
					}
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/activity/noticeDetail/noticeDetail?id=' + id
				})
			},

			handleSearch(e) {
				// this.params.房主名称 = this.searchText
				this.params.关键字 = this.searchText
				this.getNoticeList()
				console.log('触发搜索')
			},
			getMoreNoticeList() {

				this.params.pagination.current++
				this.$http.post('vx/proclamation/list', this.params).then(res => {
					if (res.code === 10000) {
						if (res.data.list.length) {
							res.data.list.forEach(item => {
								item.发布时间 = dayjs(item['发布时间']).format('YYYY-MM-DD HH:mm:ss')
							})
							this.noticeList = this.noticeList.concat(res.data.list)
						}
						// this.checkList = this.checkList.concat(res.data.list)
						if (this.noticeList.length === res.data.total) {
							this.status = 'noMore'
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.van-empty {
		background-color: #fff;
	}

	.record-container {
		font-size: 32rpx;
		// padding-top: 68rpx;
		background-color: #f5f5f5;

		// padding-bottom: 40rpx;
		.new-room {
			color: $theme-color;
			margin-left: 34rpx;
		}

		.search {
			// margin-left: 100rpx;
			width: 750rpx;
			height: 96rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-left: 20rpx;
			margin-bottom: 20rpx;

			.search-box {
				width: 580rpx;
				height: 56rpx;
				padding-left: 17rpx;
				padding-right: 20rpx;
				// background-color: pink;
				border: 2rpx solid #595959;
				border-radius: 28rpx;
				display: flex;

				.icon {
					width: 50rpx;
					height: 46rpx;
					margin-top: 3rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.search-input {
					flex: 1;
					height: 100%;
					color: #999;
				}

				.pop {
					position: absolute;
					right: 60rpx;
				}
			}
		}

	}
</style>
